<!--函数文本域组件封装-->
<template>
    <div class="function-area">
        <div class="area-top">
            <i class="top-list" v-for="item in baseFunList" @click="handleClick(item, 'baseFunction')">{{item}}</i>
            <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link" >
                    字段类型<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">自动</el-dropdown-item>
                    <el-dropdown-item command="2">文本</el-dropdown-item>
                    <el-dropdown-item command="3">数值</el-dropdown-item>
                    <el-dropdown-item command="4">时间</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span>{{textType}}</span>
        </div>
        <div class="area-bottom">
            <el-input type="textarea" placeholder='示例：销售额/计划销售额' v-model="textValue" id="inputDom" @input="inputHandler"></el-input>
            <span>{{message}}</span>
            <div class="function-dsp" v-show="treeFlag">
                <span>函数释义</span><i :class="iconFlag ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"  @click="showDescription"></i>
                <div class="function-dsp-content">{{funDesp}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery'
    import ajax from '@api/ajax'
    import {EXPRESS} from '@api/url'
    export default {
        data () {
            return {
                baseFunList: ['+', '-', '*', '/', '(', ')'],
                textValue: '',
                content: '',
                postValue: '',
                allTreeData: [],
                saveItem: {},
                iconFlag: true,
                treeFlag: false,
                funDesp: '', // 函数释义
                textType: '', // 选择的文本域类型
                temp1: '',
                message: ''
            }
        },
        props: {
            styleChange: {
                type: Boolean,
                default () {
                    return false
                }
            },
            // 接收过滤树的点击值
            treeValue: {
                type: String
            },
            dataValue: {
                type: Object
            },
            menuId: {
                type: String
            }
        },
        name: 'FunctionArea',
        watch: {
            styleChange (newVal) {
                if (newVal) {
                    $('.el-dropdown').css('margin-left', '20%')
                    $('.area-top').css('width', '150%')
                    $('.function-area .el-textarea >.el-textarea__inner').css('width', '150%')
                    $('.function-dsp').css('width', '143%')
                } else {
                    $('.el-dropdown').css('margin-left', '40%')
                    $('.area-top').css('width', '114.3%')
                    $('function-area .el-textarea > .el-textarea__inner').css('width', '114.3%')
                    $('.function-dsp').css('width', '114.5%')
                }
            }
        },
        methods: {
            handleClick (item, postValueFlag) {
                this.appendValue(item, postValueFlag)
            },
            setTxt1CursorPosition (id, position) {
                let i = parseInt(position)
                let oTxt1 = document.getElementById(id)
                oTxt1.focus()
                oTxt1.selectionStart = i
                oTxt1.selectionEnd = i
            },
            appendValue (item, postValueFlag) {
                this.pageMode = sessionStorage.getItem('pageMode')
                this.saveItem = item.clickData
                let temp = ''
                let elInput = document.querySelector('#inputDom')
                let startPos = elInput.selectionStart
                let endPos = elInput.selectionEnd
                if (startPos === undefined || endPos === undefined) return
                let txt = elInput.value
                    if (postValueFlag === 'baseFunction') {
                        temp = item + ' '
                    } else if (postValueFlag === 'AggregateFunction') {
                        temp = item.clickData.name + '(  )'
                    } else if (postValueFlag === 'group') {
                        this.allTreeData = item.allTreeData
                        temp = item.clickData.name + ' '
                    } else if (postValueFlag === 'commonText') {
                        temp = item
                    }
                    let result = txt.substring(0, startPos) + temp + txt.substring(endPos)
                elInput.value = result
                elInput.focus()
                if (postValueFlag === 'AggregateFunction') {
                    this.setTxt1CursorPosition('inputDom', startPos + temp.length - 2)
                } else if (postValueFlag === 'baseFunction') {
                    this.setTxt1CursorPosition('inputDom', startPos + temp.length)
                } else {
                    this.setTxt1CursorPosition('inputDom', startPos + temp.length)
                }
                this.textValue = result
                this.content = result
                this.temp1 = this.textValue
                if (this.allTreeData.length > 0) {
                    for (let i = 0; i < this.allTreeData.length; i++) {
                        let arrItem = this.allTreeData[i]
                        if (this.temp1.indexOf(arrItem.name) != -1) {
                            this.temp1 = this.temp1.replace(new RegExp(arrItem.name, 'g'), arrItem.enName + '')
                        }
                    }
                }
                if (this.temp1.trim() !== '') {
                    this.isLegal(this.temp1)
                }
                let param = {
                    value1: this.temp1,
                    value2: this.textType === '' ? '1' : this.textType,
                    pageMode: this.pageMode
                }
                this.returnType(param.value2)
                this.$emit('getFunctionArea', param)
            },
            clearFunctionArea () {
                this.textValue = ''
            },
            inputHandler () {
                this.pageMode = sessionStorage.getItem('pageMode')
                if (this.textValue.length < this.content.length) {
                    this.content = this.textValue
                    this.temp1 = this.textValue
                    if (this.allTreeData.length > 0) {
                        for (let i = 0; i < this.allTreeData.length; i++) {
                            let arrItem = this.allTreeData[i]
                            if (this.temp1.indexOf(arrItem.name) != -1) {
                                this.temp1 = this.temp1.replace(new RegExp(arrItem.name, 'g'), arrItem.enName + '')
                            }
                        }
                    }
                    console.info(this.temp1)
                    if (this.temp1.trim() !== '') {
                        this.isLegal(this.temp1)
                    }
                    let param = {
                        value1: this.temp1,
                        value2: this.textType === '' ? '1' : this.textType,
                        pageMode: this.pageMode
                    }
                    this.returnType(param.value2)
                    this.$emit('getFunctionArea', param)
                    return
                }
                this.textValue = this.content
                // this.isLegal(this.temp1)
            },
            editData (treeVal, val) {
                debugger
                this.pageMode = sessionStorage.getItem('pageMode')
                let temp1 = val.value1
                let temp = val.value1
                console.info(temp)
                this.returnType(val.value2)
                console.info(treeVal)
                if (treeVal.length > 0) {
                    for (let i = 0; i < treeVal.length; i++) {
                        let arrItem = treeVal[i]
                        if (arrItem.enName !== '' && temp.indexOf(arrItem.enName) != -1) {
                            temp = temp.replace(new RegExp(arrItem.enName, 'g'), arrItem.name + '')
                        }
                    }
                }
                this.textValue = temp
                this.content = temp
                if (temp1.trim() !== '') {
                    this.isLegal(temp1)
                }
                let param = {
                    value1: val.value1,
                    value2: val.value2 === '' ? '' : val.value2,
                    pageMode: this.pageMode
                }
                this.$emit('getFunctionArea', param)
            },
            // 判断公式是否合法
            isLegal (val) {
                let param = {
                    modelId: this.menuId,
                    exp: val
                }
                ajax.post(EXPRESS, param).then(res => {
                    debugger
                    this.message = res.data
                }).catch(err => {
                  console.error(err, '发送失败！')
               })
                console.info(val)
            },
            // 是否展开函数释义
            showDescription () {
                if (this.iconFlag) {
                    this.iconFlag = false
                    $('.function-dsp').css('height', '202px')
                    this.funDesp = this.saveItem.description
                    $('.el-textarea > .el-textarea__inner').css('height', '150px')
                    $('.function-dsp-content').css('margin', '10px')
                } else {
                    this.iconFlag = true
                    this.funDesp = ''
                    $('.function-dsp').css('height', '32px')
                    $('.el-textarea > .el-textarea__inner').css('height', '320px')
                    $('.function-dsp-content').css('margin', '0px')
                }
            },
            // 改变函数释义div
            changeTreeFlag (val) {
               this.treeFlag = val.treeFlag
                this.saveItem = val.clickData
                if (this.treeFlag) {
                    this.iconFlag = false
                    console.info(this.saveItem)
                    this.funDesp = this.saveItem.description
                    $('.el-textarea > .el-textarea__inner').css('height', '150px')
                    $('.function-dsp').css('width', '143%')
                    $('.function-dsp').css('height', '202px')
                } else {
                    $('.el-textarea > .el-textarea__inner').css('height', '350px')
                    this.funDesp = ''
                }
            },
            // 改变表单校验信息
            changeMsg (val) {
                this.message = val
            },
            // 文本域类型添加点击事件
            handleCommand (command) {
                let tmp = ''
                switch (command) {
                    case '1':
                        this.textType = '自动'
                        tmp = '1'
                        break
                    case '2':
                        this.textType = '文本'
                        tmp = '2'
                        break
                    case '3':
                        this.textType = '数值'
                        tmp = '3'
                        break
                    case '4':
                        this.textType = '时间'
                        tmp = '4'
                        break
                    default:
                        tmp = '1'
                }
                this.pageMode = sessionStorage.getItem('pageMode')
                let param = {
                    value1: this.temp1,
                    value2: tmp,
                    pageMode: this.pageMode
                }
                this.$emit('getFunctionArea', param)
            },
            // returnType
            returnType (temp) {
                switch (temp) {
                    case '1':
                        this.textType = '自动'
                        break
                    case '2':
                        this.textType = '文本'
                        break
                    case '3':
                        this.textType = '数值'
                        break
                    case '4':
                        this.textType = '时间'
                        break
                    default:
                        this.textType = '自动'
                }
            }
        },
        mounted () {
            if (this.dataValue !== null || this.dataValue !== undefined) {
                this.textValue = this.dataValue.value1
                this.textType = this.dataValue.value2
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    .function-area
        .area-top
            width 114.3%
            height 25px
            border-right  1px solid #D8DCE5
            .el-dropdown
                margin-left 40%
            .top-list
                margin-left 25px
                font-weight bold
                font-size 17px
                cursor pointer
        .area-bottom
            .el-textarea__inner
                width 114.3%
                height 350px
                border-radius 0
            .function-dsp
                overflow-y auto
                border 1px solid #D8DCE5
                .function-dsp-content
                    margin 10px
</style>
